const vm = new Vue({
    el: '#eformapp',
    data: {
        formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
        formData: {},
        optionData: {},
        templateId: '',
        dataId: '',
        dataLinkTable: '',
        dataLinkTableId: '',
        iframeHeight:0,
        // 显示默认的提交按钮
        showDefaultSubmitButton: false,
        //
        eformDataId: ''
    },
    watch: {
        iframeHeight(newVal, oldVal) {
            window.parent.postMessage(
                {
                    vueAppHeight:newVal
                },
                "*"
            );
            // window.parent.setContentHeight(newVal);
        },
    },
    //https://www.yuque.com/variantdev/vform/pi1mff#mE6tm
    mounted() {
        let that = this;
        this.iframeHeight = document.body.scrollHeight;
        setInterval(this.valChange, 200);
        this.dataLinkTable = T.p('dataLinkTable');
        this.dataLinkTableId = T.p('dataLinkTableId');
        if (!this.dataLinkTable) {
            alert('参数有误！');
        }
        if (!this.dataLinkTableId) {
            alert('参数有误！！');
        }
        // 初始化表单配置和数据
        this.dataId = T.p('dataId');
        this.templateId = T.p('templateId');
        if (this.dataId) {
            //从后端接口获取已保存的数据对象，并赋值给formData变量
            $.ajax({
                async: false,
                url: T.webRoot + '/eform/eformdata/info/' + this.dataId,
                type: 'GET',
                success: function(res) {
                    if (res.code === 0) {
                        let newFormData = $.parseJSON(res.data.dataJson);
                        $.ajax({
                            async: false,
                            url: T.webRoot + '/eform/eformtemplate/info/' + res.data.templateId,
                            type: 'GET',
                            success: function(res) {
                                let templateConfig = $.parseJSON(res.data.templateConfig);
                                that.$refs.vFormRef.setFormJson(templateConfig);
                                that.$nextTick(() => {
                                    that.$refs.vFormRef.setFormData(newFormData);
                                });
                            },
                            error: function(err) {
                                console.log('err', err)
                            }
                        });
                    } else {
                        console.log('加载数据失败！');
                    }
                },
                error: function(err) {
                    console.log('err', err)
                }
            });
        } else if (this.templateId) {
            //从后端接口获取表单配置
            $.ajax({
                async: false,
                url: T.webRoot + '/eform/eformtemplate/info/' + this.templateId,
                type: 'GET',
                success: function (res) {
                    let templateConfig = $.parseJSON(res.data.templateConfig);
                    that.$refs.vFormRef.setFormJson(templateConfig);
                    that.submitUrl = res.data.submitUrl;
                },
                error: function (err) {
                    console.log('err', err)
                }
            });
        } else {
            layer.msg('参数有误！！!', {icon: 5});
        }
        window.top.addEventListener('message', function (eventObj) {
            if (eventObj.data && eventObj.data.saveEform){
                that.defaultSubmitForm();
            }

        })
    },
    methods: {
        valChange: function() {
            this.iframeHeight = document.body.scrollHeight;
        },
        // 表单提交
        defaultSubmitForm: function() {
            let that = this;
            this.$refs.vFormRef.getFormData().then( function(formData) {
                // Form Validation OK
                let data = {};
                if (that.templateId){
                    data = {
                        'templateId': that.templateId,
                        'dataLinkTable': that.dataLinkTable,
                        'dataLinkTableId': that.dataLinkTableId,
                        'dataJson': JSON.stringify(formData),
                    };
                    $.ajax({
                        url: T.webRoot + '/eform/eformdata/save',
                        type: 'post',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function(res) {
                            that.eformDataId = res.keyId;
                            parent.eformDataSaveSuccess(res.keyId);
                            layer.msg(res.msg, {icon: 6});
                        },
                        error: function(err) {
                            layer.msg('网络异常，请稍后重试！', {icon: 5});
                        }
                    });
                } else {
                    layer.msg('数据异常，请稍后重试！', {icon: 5});
                }
            }).catch( function(error) {
                // Form Validation Failed
                alert(error)
            })
        }
    }
});